<!--
 * @Author: [kangjie]
 * @Date: 2022-03-30 10:49:39
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-03-31 15:32:32
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
  <div id="app">
    <!-- <my-com-a :Fmsg="Fmsg" :is-active="true" :obj="{name:'zhangsan',age:15}" title="标题" :stu="[1,2,3,4,5]"></my-com-a> -->
    <!-- null 和 undefiend数据类型可以通过任何类型验证 -->
    <!-- <my-com-a :Fmsg="Fmsg" :is-active="undefined" :obj="{name:'zhangsan',age:15}" title="标题" :stu="[1,2,3,4,5]"></my-com-a> -->
    <my-com-a name="张三" :age="80" :Fmsg="Fmsg" :is-active="56" :obj="{name:'zhangsan',age:15}" title="标题" ></my-com-a>
  </div>
  <script>
    // 声明一个组件
    let mycomA={
      // props:['Fmsg','title'],
      // 自定义数据类型
      props:{
        Fmsg:Number,
        title:String,
        // stu:Array,
        obj:Object,
        // 多个可能的数据类型
        isActive:[Boolean,Number],
        // 必传的字段 --表单验证
        name:{type:String,required:true},
        // 带有默认值
        // 自定义检验器/检验规则
        age:{
          type:Number,
          // value 就是传递过来的值
          validator(value){
            // if(value>50){
            //   return true
            // }else{
            //   return false
            // }
            return value>50
          }
        },
        // age:{type:Number,default:100},
        // 希望引用数据类型带有默认值
        // stu:{type:Array,default:[6,7,8,9,10]} //错误方式
        stu:{
          type:Array,
          // 使用引用数据类型使用工厂函数返回默认值
          default(){
            return [11,12]
          }
        }
      },
      template:`
        <div>子组件A
          <span>{{stu}}-{{name}}-{{age}}-{{Fmsg}}-{{title}}-{{obj}}-{{isActive}}</span>
        </div>
      `
    }
    let vm=new Vue({
      // 局部注册
      components:{
        'my-com-a':mycomA
      },
      el:'#app',
      data:{
        Fmsg:12
      },
      methods:{
        
      }
    })
  </script>
</body>
</html>